<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"

    >
      <!--  全选列-->
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- 序号列 -->
      <el-table-column type="index" width="50" label="序号"> </el-table-column>

      <!-- <el-table-column prop="data" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column> -->
      <!--table列  -->
     <template v-for="(item,index) in TabelColumn">
    <!-- switch列 -->
    <el-table-column :key="index"  width="80" v-if='item.type==="switch"' :label='item.label'  :prop='item.prop' >
    <template slot-scope="scope">
    <el-switch v-model="scope.row.prop" @change='switchChang(scope.row)' />
        
        </template>
        </el-table-column>
        <!-- img -->
        <el-table-column  v-if='item.type==="img"' width="150" :key="item.id"  :label='item.label'  :prop='item.prop'>
            <template  slot-scope="scope">
             <!-- <span>{{item}}</span> -->
              <el-image style="width: 100px; height: 100px" :src="scope.row[item.prop]"  />
            </template>
           
          
           </el-table-column>
        
           <el-table-column  v-if='item.type==="opt"'  width="300"  :key="index"  :label='item.label'  :prop='item.prop'>

            <template   slot-scope="scope">
            <!-- 操作链接 -->
             <el-button
             
             
             :size='item.size'
             :type='operation.type'
              v-for='(operation,index) in item.operations' 
              :key="index"
              @click="rowoperation(scope.row,operation.method)"
              >{{operation.label}}</el-button>
            </template>
           
          
           </el-table-column>
        <!-- 普通 -->
        <el-table-column :key="index"  width="80" v-if='item.type==="text"' :label='item.label'  :prop='item.prop'> </el-table-column>
      
        </template>
       
    
    
    </el-table>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      counter: this.msg,
      multipleSelection: this.Selection,
    };
  },
  props: {
    msg: {
      type: String,
      default: "wqq",
    },
    tableData: {
      type: Array,
      default: [],
    },
   Selection: {
      type: Array,
      default: function() {
			return []
		}
    },
    TabelColumn:{
      type: Array,
      default: function() {
			return []
		}
    },
  },
  methods: {
    handleSelectionChange(val) {
        console.log(val)
        this.$emit('handleSelectionChange',val)

      },
      switchChang(row){
        console.log(row)
        this.$emit('switchChang',row)
      },
        // 按钮操作事件
    rowoperation(row,method){
    console.log(row,method)
    this.$emit('rowoperation',row,method)
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 300px;
  list-style: none;
}
.el-button {
  margin-left: 20px;
}
</style>